@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/ngx-toastr/toastr-bs4-alert.scss';

/* You can add global styles to this file, and also import other style files */
/* select starting stylings ------------------------------*/
.select {
	position: relative;
	width: 300px;
}

.link-button {
	padding: 0 !important;
	color: blue !important;
	margin: 0 !important;
}

.select-text {
	position: relative;
	font-family: inherit;
  font-weight: 300;
  color: #fff;
	background-color: transparent;
	width: 300px;
	padding: 10px 10px 5px 0px;
	font-size: 1rem;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(255,2555,255, 0.2);
}

/* Remove focus */
.select-text:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0, 0);
}

	/* Use custom arrow */
.select .select-text {
	appearance: none;
	-webkit-appearance:none
}

.select:after {
	position: absolute;
	top: 18px;
	right: 10px;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
  margin-top: 2px;
	content: "";
  background: #fff;
	border-left: 6px solid #263238;
	border-right: 6px solid #263238;
	border-top: 6px solid rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

/* BOTTOM BARS ================================= */
.select-bar {
	position: relative;
	display: block;
	width: 350px;
}

.select-bar:before, .select-bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #2F80ED;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}

.gray-text {
  color: #ccc;
}

.adminio-logo {
    font-family: 'Righteous', cursive;
}
.separator {
    display: flex;
    align-items: center;
    text-align: center;
    padding-bottom: 10px;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

.transparent {
    background-color: #ffffff !important;
    opacity: .8;
    color: #222;
}

.transparent > a  {
  color: #222 !important;
}

div.align-right {
  text-align: right;
}

a.action-link {
  padding: 2px;
  margin: 3px
}

.align-center {
  text-align: center;
}

li.type-none {
	list-style-type: none;
}

ul.type-none {
	padding-inline-start: 0px;
}

.dropdown-custom {
	width: 200px;
}

div.statement-actions {
  width: 250px;
  display:inline-block;
}

div.lineCut {
  display:inline-block;
}

div.backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


.loverlay{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background-color: #fefefe;
  opacity: 0.2;
  width: 100%;
  height: 100%;
}

.lpopup{
	display: table;
	margin: 0 auto;
  left: 50%;
  top: 40%;
  background-color: transparent;
  text-align: center;
  z-index: 222;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  position: absolute;
}

.error-lpopup{
  display: table;
  margin: 0 auto;
  left: 50%;
  top: 20%;
  box-shadow: 0px 3px 10px #959595;
  color: #fff;
  text-align: center;
  z-index: 222;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  border-radius: 35px;
  position: absolute;
}

.error-lpopup>mdb-icon{
  margin-top: 30px;
}

.pointer {
	cursor: pointer !important;
}

.button-fix {
	margin-top: 0.23rem !important;
}




/*list css*/

.c-btn {
  min-width: 485px !important;
  background: #fff;
  border: 1px solid #ccc;
  color: #333; }

.selected-list .c-list .c-token {
  background: #0079FE; }
  .selected-list .c-list .c-token .c-label {
    color: #fff; }
  .selected-list .c-list .c-token .c-remove svg {
    fill: #fff; }

.selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
  fill: #333; }

.dropdown-list ul li:hover {
  background: #f5f5f5; }

.arrow-up, .arrow-down {
  border-bottom: 15px solid #fff; }

.arrow-2 {
  border-bottom: 15px solid #ccc; }

.list-area {
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0px 1px 5px #959595; }

.select-all {
  border-bottom: 1px solid #ccc; }

.list-filter {
  border-bottom: 1px solid #ccc; }
  .list-filter .c-search svg {
    fill: #888; }
  .list-filter .c-clear svg {
    fill: #888; }

.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
  border-color: #0079FE;
  background-color: #f2f2f2; }

.pure-checkbox input[type="checkbox"] + label {
  color: #000; }

.pure-checkbox input[type="checkbox"] + label:before {
  color: #0079FE;
  border: 1px solid #0079FE; }

.pure-checkbox input[type="checkbox"] + label:after {
  background-color: #0079FE; }

.pure-checkbox input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc; }

.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc; }

.pure-checkbox input[type="checkbox"] + label:after {
  border-color: #ffffff; }

.pure-checkbox input[type="radio"]:checked + label:before {
  background-color: white; }

.pure-checkbox input[type="checkbox"]:checked + label:before {
  background: #0079FE; }

.single-select-mode .pure-checkbox input[type="checkbox"]:focus + label:before, .single-select-mode .pure-checkbox input[type="checkbox"]:hover + label:before {
  border-color: #0079FE;
  background-color: #f2f2f2; }

.single-select-mode .pure-checkbox input[type="checkbox"] + label {
  color: #000; }

.single-select-mode .pure-checkbox input[type="checkbox"] + label:before {
  color: transparent !important;
  border: 0px solid #0079FE; }

.single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
  background-color: transparent !important; }

.single-select-mode .pure-checkbox input[type="checkbox"]:disabled + label:before {
  border-color: #cccccc; }

.single-select-mode .pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
  background-color: #cccccc; }

.single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
  border-color: #0079FE; }

.single-select-mode .pure-checkbox input[type="radio"]:checked + label:before {
  background-color: white; }

.single-select-mode .pure-checkbox input[type="checkbox"]:checked + label:before {
  background: none !important; }

.selected-item {
  background: #e9f4ff; }

.btn-iceblue {
  background: #0079FE;
  border: 1px solid #ccc;
  color: #fff; }
